<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机京东</title>
    <link rel="stylesheet" th:href="@{css/common.css}">
    <link rel="stylesheet" th:href="@{css/index.css}">
    <link rel="shortcut icon" th:href="@{favicon.ico}">
</head>

<body>

    <!-- 首页 -->
    <header class="clearfix">
        <a href="#" class="logo">logo</a>
        <div class="search">
            <label>
                <input type="text" placeholder="100万件超级爆品疯抢">
            </label>
        </div>
        <a href="#" class="login">登录</a>
    </header>

    <!-- 轮播图 -->
    <div class="lunbo">
        <a href="#">
            <img alt="" th:src="@{uploads/l1.jpg}">
        </a>
    </div>

    <!-- 导航 -->
    <nav>
        <a href="#">
            <img th:src="@{images/nav_1.png}" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img th:src="@{images/nav_2.png}" alt="">
            <span>全球购</span>
        </a>
        <a href="#">
            <img th:src="@{images/nav_3.png}" alt="">
            <span>充值中心</span>
        </a>
        <a href="#">
            <img th:src="@{images/nav_4.png}" alt="">
            <span>服装城</span>
        </a>
        <a href="#">
            <img th:src="@{images/nav_5.png}" alt="">
            <span>理财</span>
        </a>
        <a href="#">
            <img th:src="@{images/nav_6.png}" alt="">
            <span>领券</span>
        </a>
        <a href="#">
            <img th:src="@{images/nav_7.png}" alt="">
            <span>物流查询</span>
        </a>
        <a href="#">
            <img th:src="@{images/nav_8.png}" alt="">
            <span>我的关注</span>
        </a>
    </nav>

    <!-- 掌上秒杀 -->
    <div class="hand clearfix">
        <div class="hand-t">
            <div class="hand-t-l">
                <span>⏰</span>
                <span>掌上秒杀</span>
                <div class="shijian">
                    <span>0</span>
                    <span>5</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                </div>
            </div>
            <div class="hand-t-r">
                <a href="#">更多秒杀 &gt;</a>
            </div>
        </div>
        <div class="hand-b">
            <a href="#">
                <img th:src="@{uploads/seckill_1.jpg}" alt="">
                <span>¥79</span>
                <del>¥139</del>
                <p>热卖</p>
            </a>
            <a href="#">
                <img th:src="@{uploads/seckill_2.jpg}" alt="">
                <span>¥79</span>
                <del>¥139</del>
                <p>热卖</p>
            </a>
            <a href="#">
                <img th:src="@{uploads/seckill_3.jpg}" alt="">
                <span>¥79</span>
                <del>¥139</del>
                <p>热卖</p>
            </a>
        </div>
    </div>

    <!-- 618神劵 -->
    <div class="god clearfix">
        <a href="#">
            <img th:src="@{uploads/banner_bg.jpg}" alt="">
        </a>
        <div class="phone">
            <a href="#">
                <img th:src="@{uploads/banner_1.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/banner_2.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/banner_3.jpg}" alt="">
            </a>
        </div>
    </div>

    <!-- 手机专享 -->
    <div class="zhuanxiang">
        <a href="#">
            <img th:src="@{uploads/major_1.jpg}" alt="">
        </a>
        <a href="#">
            <img th:src="@{uploads/major_2.jpg}" alt="">
        </a>
        <a href="#">
            <img th:src="@{uploads/major_3.jpg}" alt="">
        </a>
    </div>

    <!-- 京东超市 -->
    <div class="market">
        <a href="#">
            <img th:src="@{uploads/major_4.jpg}" alt="">
        </a>
        <a href="#">
            <img th:src="@{uploads/major_5.jpg}" alt="">
        </a>
        <a href="#">
            <img th:src="@{uploads/major_6.jpg}" alt="">
        </a>
        <a href="#">
            <img th:src="@{uploads/major_7.jpg}" alt="">
        </a>

    </div>

    <!-- 生活旅行 -->
    <div class="life">
        <a href="#">
            <img th:src="@{uploads/advert_1.jpg}" alt="">
        </a>
    </div>

    <!-- 特色超市 -->
    <div class="tese">
        <div class="tese-t">
            <a>特色超市</a>
        </div>
        <div class="tese-b">
            <a href="#">
                <img th:src="@{uploads/market_1.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/market_2.jpg}" alt="">
                <img th:src="@{uploads/market_3.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/market_4.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/market_5.jpg}" alt="">
            </a>
        </div>
    </div>

    <!-- 粽子 -->
    <div class="zongzi">
        <a href="#">
            <img th:src="@{uploads/advert_2.jpg}" alt="">
        </a>
    </div>

    <!-- 主题街 -->
    <div class="theme">
        <div class="theme-t">
            <a>主题街</a>
        </div>
        <div class="theme-b">
            <div class="theme-b-l">
                <a href="#">
                    <img th:src="@{uploads/theme_1.jpg}" alt="">
                </a>
            </div>
            <div class="theme-b-z">
                <a href="#" class="aa">
                    <img th:src="@{uploads/theme_2.jpg}" alt="">
                </a>
                <a href="#" class="ab">
                    <img th:src="@{uploads/theme_3.jpg}" alt="">
                </a>
                <a href="#" class="ac">
                    <img th:src="@{uploads/theme_4.jpg}" alt="">
                </a>
            </div>
        </div>
        <div class="theme-z">
            <a href="#">
                <img th:src="@{uploads/theme_5.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/theme_6.jpg}" alt="">
            </a>
            <a href="#">
                <img  th:src="@{uploads/theme_7.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/theme_8.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/theme_9.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/theme_10.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/theme_11.jpg}" alt="">
            </a>
            <a href="#">
                <img th:src="@{uploads/theme_12.jpg}" alt="">
            </a>
        </div>
    </div>

    <!-- 洗衣 -->
    <div class="xiyi">
        <a href="#">
            <img th:src="@{uploads/advert_3.jpg}" alt="">
        </a>
    </div>

    <!-- 品牌 -->
    <div class="pinpai">
        <div class="pinpai-t">
            <a>品牌推荐</a>
        </div>
        <div class="pinpai-b">
            <a href="#" class="aa">
                <img th:src="@{uploads/brand_1.jpg}" alt="">
            </a>
            <a href="#" class="ab">
                <img th:src="@{uploads/brand_2.jpg}" alt="">
            </a>
            <a href="#" class="ac">
                <img th:src="@{uploads/brand_3.jpg}" alt="">
            </a>
        </div>
    </div>

    <!-- 奶粉 -->
    <div class="naifen">
        <a href="#">
            <img th:src="@{uploads/advert_4.jpg}" alt="">
        </a>
    </div>

    <!-- 猜你喜欢 -->
    <div class="like">
        <div class="like-t">
            <a href="#" class="aa">猜你喜欢</a>
            <a href="#" class="ab">
                <i></i>
                登录后更懂你 &gt;
            </a>
        </div>
        <div class="like-b">
            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_1.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_2.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_3.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_4.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_5.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_6.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_7.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                     <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_8.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_9.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>

            <div class="one">
                <div class="like-b-t">
                    <span>¥25</span>
                    <a href="#">看相似</a>
                </div>
                <div class="like-b-i">
                    <a href="#">
                        <img th:src="@{uploads/item_10.jpg}" alt="">
                    </a>
                </div>
                <div class="like-b-b">
                    <a href="#">迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇</a>
                </div>
            </div>


        </div>
    </div>

    <!-- 底部 -->
    <footer class="clearfix">
        <div class="footer-t">
            <a href="#">点击加载更多</a>
        </div>
        <div class="footer-z">
            <a href="#">登录</a>
            <div class="line">|</div>
            <a href="#">注册</a>
            <div class="line">|</div>
            <a href="#">反馈</a>
            <div class="line">|</div>
            <a href="#">回到顶部</a>
        </div>
        <div class="footer-j">
            <a href="#">
                <i></i>
                客户端
            </a>
            <a href="#">
                <i></i>
                触屏版
            </a>
            <a href="#">
                <i></i>
                电脑版
            </a>
        </div>
        <div class="footer-b">
            Copyright © 2004-2016 京东JD.com 版权所有
        </div>
    </footer>

    <!-- 底部信息 -->
    <div class="infor clearfix">
        <a href="#">
            <img th:src="@{images/index-icon.png}" alt="">
        </a>
        <a href="#">
            <img th:src="@{images/sort-icon.png}" alt="">
        </a>
        <a href="#">
            <img th:src="@{images/618-icon.png}" alt="">
        </a>
        <a href="#">
            <img th:src="@{images/cart-icon.png}" alt="">
        </a>
        <a href="#">
            <img th:src="@{images/center-icon.png}" alt="">
        </a>
    </div>
</body>

</html>